<template>
  <el-card
    class="!border-none"
    shadow="never"
    :body-style="{ 'padding-right': '200px' }"
  >
    <el-form class="ls-form" :model="formData" inline>
      <el-form-item label="服务名称">
        <el-input
          class="ls-input"
          v-model="formData.goodsInfo"
          placeholder="服务名称"
        />
      </el-form-item>
      <el-form-item label="用户信息">
        <el-input
          class="ls-input"
          v-model="formData.userInfo"
          placeholder="昵称/手机号"
        />
      </el-form-item>
      <el-form-item label="回复状态">
        <el-select
          v-model="formData.status"
          class="ls-input"
          placeholder="请选择"
        >
          <el-option label="全部" value />
          <el-option label="待回复" value="0" />
          <el-option label="已回复" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="评价等级">
        <el-select
          v-model="formData.commentLevel"
          class="ls-input"
          placeholder="请选择"
        >
          <el-option label="全部" value />
          <el-option label="好评" :value="1" />
          <el-option label="中评" :value="2" />
          <el-option label="差评" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="评价时间">
        <data-picker
          class="ls-input"
          style="width: 280px"
          v-model:startTime="formData.startTime"
          v-model:endTime="formData.endTime"
        />
      </el-form-item>
      <el-form-item>
        <div class="flex">
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card shadow="never" class="mt-4 !border-none">
    <el-table
      ref="tableDataRef"
      :data="pager.lists"
      style="width: 100%"
      v-loading="pager.loading"
    >
      <el-table-column label="服务名称" min-width="180">
        <template #default="scope">
          <div class="flex items-center">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.goodsImageUrl"
              :preview-src-list="[scope.row.goodsImageUrl]"
              :hide-on-click-modal="true"
              :preview-teleported="true"
              :fit="'cover'"
            />
            <div class="ml-2">{{ scope.row.goodsName }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column property="nickname" label="用户信息" min-width="160">
        <template #default="scope">
          <el-popover placement="top-start" width="200px" trigger="hover">
            <div class="flex">
              <span class="flex-none mr-2">头像：</span>
              <el-image
                :src="scope.row.avatarUrl"
                style="width: 40px; height: 40px; border-radius: 50%"
              />
            </div>
            <div class="flex mt-2">
              <span class="flex-none mr-2">昵称：</span>
              <span>{{ scope.row.nickname }}</span>
            </div>
            <div class="flex mt-2">
              <span class="flex-none mr-6">ID：</span>
              <span>{{ scope.row.sn }}</span>
            </div>
            <template #reference>
              <div class="pointer">
                {{ scope.row.nickname }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="commentLevel" label="评价等级" min-width="160">
        <template #default="scope">
          <el-rate v-model="scope.row.serviceComment" disabled />
          <div class="ml-[20px] lighter text-xs">
            {{ scope.row.commentLevelName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评价内容" min-width="200">
        <template #default="scope">
          <div class="m-l-10">{{ scope.row.comment }}</div>
          <div class="m-t-10">
            <div
              v-for="(item, index) in scope.row.commentUrlList"
              :key="index"
              class="inline mr-[5px]"
            >
              <el-image
                style="width: 60px; height: 60px"
                :src="item"
                :preview-src-list="[item]"
                :hide-on-click-modal="true"
                :preview-teleported="true"
                :fit="'cover'"
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column property="reply" label="回复内容" min-width="180">
        <template #default="scope">
          {{ scope.row.reply || '-' }}
        </template>
      </el-table-column>
      <el-table-column property="statusName" label="回复状态" min-width="140">
        <template #default="scope">
          <el-tag type="danger" v-if="scope.row.status === 0">待回复</el-tag>
          <el-tag type="success" v-if="scope.row.status === 1">已回复</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="createTime" label="评价时间" min-width="180" />
      <el-table-column label="操作" min-width="180" fixed="right">
        <template #default="scope">
          <div class="flex">
            <evaluate-form
              v-perms="['comment:reply']"
              :id="scope.row.id"
              :title="scope.row.status ? '编辑回复' : '回复评价'"
              :reply="scope.row.reply"
              @refresh="getLists"
            />
            <el-link
              v-perms="['comment:del']"
              class="ml-4"
              type="danger"
              :underline="false"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt-4">
      <pagination v-model="pager" @change="getLists" />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { apiCommentLists, apiCommentDel } from '@/api/service/evaluate'
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import DataPicker from '@/components/daterange-picker/index.vue'
import evaluateForm from './components/evaluate-form.vue'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'

interface formDataObj {
  goodsInfo?: string
  userInfo?: string
  status?: string
  commentLevel: string
  startTime: string
  endTime: string
}

const formData = ref<formDataObj>({
  goodsInfo: '',
  userInfo: '',
  status: '',
  commentLevel: '',
  startTime: '',
  endTime: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: apiCommentLists,
  params: formData.value
})

// 删除广告位
const handleDelete = async (id: number): Promise<void> => {
  await feedback.confirm('确认要删除吗？')
  await apiCommentDel({ id })
  getLists()
}
getLists()
</script>

<style lang="scss">
.ls-input {
  width: 280px;
}

.el-rate__item {
  line-height: 12px;

  i {
    margin-right: 2px !important;
  }
}
</style>
